<template>
  <div class="app">
    <!-- views/Register.vue -->
    <mt-header title="登录">
      <mt-button icon="back" slot="left" @click="$router.go(-1)"></mt-button>
      <router-link to="/register" slot="right">新用户？</router-link>
      <router-link to="/updateupwd" slot="right">忘记密码</router-link>
    </mt-header>
    <!-- 表单 -->
    <img src="../assets/log/WechatIMG1408.png" @click="$router.push('/')">
    <div v-show="selected == 'name'" class="login">
      <mt-field
        type="text"
        placeholder="请输入账号/手机号"
        label="账号"
        v-model="uname"
        :state="unameState"
        @blur.native.capture="checkName"
      >
      </mt-field>
      <mt-field
        type="password"
        placeholder="请输入密码"
        label="密码"
        v-model="upwd"
        :state="pwdState"
        @blur.native.capture="checkPwd"
      >
      </mt-field>
      <mt-button @click.native.capture="checkForm" type="primary" size="large">安全登录</mt-button>
    </div>

    <div v-show="selected == 'auth'" class="login">
      <mt-field
          type="text"
          placeholder="请输入手机号码"
          label="手机号码"
          v-model="phone"
          :state="phoneState"
          @blur.native.capture="checkPhone"
        ></mt-field>
        <mt-field
          type="text"
          placeholder="请输入验证码"
          label="验证码"
          v-model="auths"
          :state="authState"
          @blur.native.capture="checkAuth">
          <mt-button
            id="btn"
            @click.native.capture="count"
            size="small"
            :disabled="AuthBoolean"
            type="primary"
            >{{ authCode }}</mt-button
          >
        </mt-field>
        <mt-button @click.native.capture="checkForm" type="primary" size="large">安全登录</mt-button>
    </div>
    <van-tabbar v-model="selected">
      <van-tabbar-item name="name" icon="user-circle-o">账号登录</van-tabbar-item>
      <van-tabbar-item name="auth" icon="envelop-o">短信登录</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
import { mapMutations } from "vuex";
import { Toast } from "mint-ui";
export default {
  watch: {
    authCode(newvalue, oldvalue) {
      if (newvalue == 0) {
        this.authCode = "获取验证码";
        this.AuthBoolean = false;
        btn.style = "background-color: rgb(99, 190, 91) ;";
      }
    },
    selected(newvalue, oldvalue) {
      if (this.selected == "name") {
        this.phoneState = "";
        this.authState = "";
      } else {
        this.unameState = "";
        this.pwdState = "";
      }
    },
  },
  data() {
    return {
      uname: "", // 绑定账号输入框的值
      unameState: "", // 绑定账号输入框的state属性值
      upwd: "",
      pwdState: "",
      phone: "",
      phoneState: "",
      auths: "",
      authState: "",
      authCode: "获取验证码",
      AuthBoolean: false,
      selected: "name",
    };
  },
  methods: {
    ...mapMutations("user", ["updateUserInfo"]),
    checkForm() {
      // 点击提交按钮，验证整张表单
      if (this.selected == "name") {
        if (this.checkName() && this.checkPwd()) {
          this.call(this.uname, this.$md5(this.upwd));
        } else {
          return
        }
      } else if (this.selected == "auth") {
        if (this.checkPhone() && this.checkAuth()) {
          this.call(this.phone, this.auths);
        } else{
          return
        }
      }
    },

    call(n, p) {
      //发送请求
      var url = "users/login";
      var params = `uname=${n}&upwd=${p}`;
      if (this.selected == "auth") {
        params = `phone=${n}&auth=${p}`;
      }
      this.axios.post(url, params).then(res => {
        if (res.data.code == 200) {
          this.updateUserInfo(res.data.data[0]);
          this.$router.push("/");
        }else if(res.data.code == 201){
          Toast({
              message: res.data.msg,
              iconClass: "icon icon-success",
          });
          return 
        }
      });
    },

    count() {
      //短信验证码按钮
      btn.style = "background-color:#aaa ;";
      this.AuthBoolean = true;
      this.authCode = 60;
      if (this.authCode > 0) {
        var timer = setInterval(() => {
          this.authCode--;
          if (this.authCode == 0) {
            clearInterval(timer);
          }
        }, 1000);
      }
    },

    checkAuth() {
      // 用于验证确认验证码输入框的值是否符合要求
      if (!this.auths) {
        this.authState = "error";
        return false;
      } else {
        this.authState = "success";
        return true;
      }
    },

    checkPhone() {
      // 用于验证确认手机号输入框的值是否符合要求
      let pipei = /^1[3-9]\d{9}$/;
      if (this.phone && pipei.test(this.phone)) {
        this.phoneState = "success";
        return true;
      } else {
        this.phoneState = "error";
        return false;
      }
    },

    checkPwd() {
      // 用于验证密码输入框的值是否符合要求
      let exp = /^[a-zA-Z0-9_-]{6,16}$/;
      if (!this.upwd) {
        this.pwdState = "error";
        return false;
      } else {
        if (exp.test(this.upwd)) {
          this.pwdState = "success";
          return true;
        } else {
          this.pwdState = "error";
          return false;
        }
      }
    },

    checkName() {
      // 用于验证账号输入框的值是否符合要求
      let exp = /^\w{3,15}$/;
      if (this.uname && exp.test(this.uname)) {
        this.unameState = "success";
        return true;
      } else {
        this.unameState = "error";
        return false;
      }
    },
  },
};
</script>


<style lang="scss" scoped>
* {
  margin: 0;
}

.app{
  height: 100vh;
  background-color: rgb(230, 250, 251);
  >img{
    width:35vw ;
    margin: 10px 50% 0;
    transform: translateX(-50%);
  }
  >.login{
    width: 350px;
    margin: 20% auto;
    padding: 5px;
    background-color: white;
    border-radius: 10px;
    >a{
      margin: 10px;
      padding: 0;
    }
    > button{
      width: 300px;
      margin: 20px auto 10px;
      padding: 5px;
      border-radius: 10px;
      background-image: linear-gradient(124.85deg,#3ed2cb -20.29%,#82f172 107.31%);
    }
  }
}

::v-deep .mint-cell-wrapper{
  background-image:none;
  padding:0;
}
.mint-cell:last-child{
  background-image:none
}

.mint-header {
  background-color: rgb(99, 190, 91);
}
#btn {
  width: 90px;
  padding: 0;
  background-image: linear-gradient(124.85deg,#3ed2cb -20.29%,#82f172 107.31%);
}

.mint-tab-item {
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>